<script setup lang="ts">
import { toRefs, reactive, onMounted, watch } from 'vue';
import projectVue from "@/components/page/project.vue";
const props = defineProps({
  list: {
    type: Array,
    default: [] as Array<Record<string, any>>
  },
})
const { list } = toRefs(props)
const state = reactive({
  list: [] as any,
})
onMounted(() => {
  state.list = list.value
})
watch(list, (val: any) => {
  state.list = val
})
</script>

<template>
  <div class="container">
    <div class="exhibition-wrapper flex flex-wrap">
      <projectVue v-for="item in state.list" :key="item" :item="item"></projectVue>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.exhibition-wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
}

.exhibition-item {
  overflow: hidden;
  width: 450px;
  height: 370px;
  background: #FFFFFF;
  border-radius: 12px;
  cursor: pointer;

  &:not(:nth-child(3n)) {
    margin-right: 45px;
  }

  .img-wrap {
    width: 450px;
    height: 165px;
    overflow: hidden;
  }

  .img {
    height: 100%;
    transition: all 0.36s ease;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    padding: 24px 20px;

    .title {
      transition: all 0.36s ease;
    }

    .desc {
      margin-top: 15px;
      margin-bottom: 25px;
      line-height: 20px;
    }
  }

  .btn {
    width: 80px;
    height: 30px;
    border-radius: 10px;
    transition: all 0.36s ease;
    border: 1px solid #9195A3;

    path {
      fill: #9195A3;
    }

    .arrow {
      transform: rotate(180deg);
    }
  }

  &:hover {
    box-shadow: 0px 12px 12px 1px rgba(98, 102, 117, 0.15);

    .img {
      transform: scale(1.08);
    }

    .title {
      background-image: linear-gradient(to right, #252086 0%, #E60012 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .btn {
      margin-left: 10px;
      border-color: #fff;
      background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);

      path {
        fill: #fff;
      }
    }
  }
}
</style>
